@import './../../scss_variables.scss';

.QueryReviewsNavigator {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-x: hidden;

    .reviews-header {
        border-bottom: var(--border);
        background-color: var(--bg-lightest);
        padding: 8px 16px;
        display: flex;
        align-items: center;

        .list-header {
            background-color: transparent !important;
            margin: 0;
        }

        .Tabs {
            flex: 1;
            ul {
                flex: 1;
                li {
                    flex: 1;
                }
            }
        }
    }

    .list-content {
        overflow-y: auto;
        overflow-x: hidden;
        padding: 8px;

        .empty-section-message {
            text-align: center;
            font-size: var(--med-text-size);
            user-select: none;
            padding: 16px;
            font-weight: bold;
            color: var(--text-light);
        }
    }
}

.QueryReviewItem {
    cursor: pointer;
    background: var(--bg-light);
    border-radius: var(--border-radius-sm);
    padding: 12px;
    margin-bottom: var(--margin-xs);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;

    &.is-selected {
        background-color: var(--bg);
        box-shadow: inset 3px 0 0 var(--color-accent);
    }

    &:hover {
        background-color: var(--bg-hover);
    }

    .review-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;

        .mr4 {
            margin-right: 4px;
        }
    }

    .query-content-section {
        padding: 8px 0;
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        margin-bottom: 8px;

        .content-label {
            display: block;
            margin-bottom: 4px;
        }
        .reason-text {
            white-space: pre-wrap;
            word-break: break-word;
        }
    }

    .meta-info {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .reviewers,
        .timestamp {
            display: flex;
            align-items: center;
        }

        .timestamp span {
            display: flex;
            align-items: center;
        }
    }
}
